<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
      <el-breadcrumb-item>管理列表</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" style="left: 30px" @click="showaddbox()"
              >添加管理</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getadmindata()"
            ></el-button>
          </el-col>
        </el-row>
        <transition name="el-zoom-in-center">
          <el-table
            :data="adminlist"
            height="500"
            border
            style="width: 100%; margin-top: 15px"
            v-show="show"
          >
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="roleName" label="角色"></el-table-column>
            <el-table-column prop="token" label="token"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showeditbox(scope.row)"
                  >编辑</el-button
                >
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-card>
    </template>
    <!-- 添加框 -->
    <el-dialog
      title="提示"
      :visible.sync="addadminVisible"
      width="30%"
      @close="addadminDialogClosed"
    >
      <span>添加Admin</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="newAdmin"
          ref="addAdminFormRef"
          :rules="addAdminFormRules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="newAdmin.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="newAdmin.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmpassword">
            <el-input
              v-model="newAdmin.confirmpassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="分配角色">
            <template>
              <el-select
                style="width: 100%"
                v-model="selectRoleId"
                filterable
                default-first-option
                placeholder="请选择角色"
              >
                <el-option
                  v-for="item in rolelist"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
        <el-button @click="hideaddbox()">取 消</el-button>
        <el-button type="primary" @click="addadmin()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 用户编辑 -->
    <el-dialog title="提示" :visible.sync="editadminVisible" width="30%">
      <span>添加{{ editAdmin.username }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="editAdmin"
          ref="editAdminFormRef"
          :rules="addAdminFormRules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editAdmin.username"></el-input>
          </el-form-item>
          <el-form-item label="token" prop="token">
            <el-input v-model="editAdmin.token" disabled></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideeditbox()">取 消</el-button>
        <el-button type="primary" @click="updateadmin()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      editadminVisible: false,
      selectRoleId: "",
      searchwords: "",
      editAdmin: {
        id: "",
        username: "",
        token: "",
      },
      newAdmin: {
        username: "",
        password: "",
        confirmpassword: "",
        selectRoleId: "",
      },
      addadminVisible: false,
      adminlist: [],
      rolelist: [],
      addAdminFormRules: {
        username: [
          { required: true, message: "请输入登录名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "登录名长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        confirmpassword: [
          { required: true, message: "请输入再次密码", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        selectRoleId: [
          { required: true, message: "请选择角色", trigger: "blur" },
          {
            message: "请选择角色",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getadmindata();
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    hideaddbox() {
      this.addadminDialogClosed();
      this.selectRoleId = "";
      this.addadminVisible = false;
    },
    hideeditbox() {
      this.editadminVisible = false;
      this.editAdmin = {};
    },
    addadminDialogClosed() {
      this.$refs.addAdminFormRef.resetFields();
    },
    getadmindata() {
      this.$http
        .get(
          "Controller/AdminController.php?token=" +
            window.sessionStorage.getItem("token")
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.adminlist = res.data.data.admin;
          } else {
            this.$Message.error(res.data.message);
          }
        });
    },
    getrolelist() {
      this.$http
        .get(
          "Controller/RoleController.php?token=" +
            window.sessionStorage.getItem("token")
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.rolelist = res.data.data.roles;
          } else {
            this.$Message.error(res.data.message);
          }
        });
    },
    showaddbox() {
      this.getrolelist();
      this.addadminVisible = true;
    },
    addadmin() {
      this.$refs.addAdminFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        if (this.selectRoleId == "") {
          this.$Message.error("请选择角色");
          return;
        }
        if (this.newAdmin.password != this.newAdmin.confirmpassword) {
          this.$Message.error("二次输入的密码不一致！");
          return;
        }
        this.newAdmin.selectRoleId = this.selectRoleId;
        var parmas = new URLSearchParams();
        parmas.append("token", window.sessionStorage.getItem("token"));
        parmas.append("username", this.newAdmin.username);
        parmas.append("password", this.newAdmin.password);
        parmas.append("roleId", this.newAdmin.selectRoleId);
        this.$http.post("Controller/AdminAdd.php", parmas).then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.getadmindata();
            this.addadminVisible = false;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      });
    },
    showeditbox(admin) {
      this.editAdmin.id = admin.id;
      this.editAdmin.username = admin.username;
      this.editAdmin.token = admin.token;
      this.editadminVisible = true;
    },
    updateadmin(){
      var parmas = new URLSearchParams();
      parmas.append("token",window.sessionStorage.getItem("token"));
      parmas.append("username",this.editAdmin.username);
      parmas.append("id",this.editAdmin.id);
      this.$http.post("Controller/AdminEdit.php",parmas)
      .then(res => {
         if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.getadmindata();
            this.editadminVisible = false;
          } else {
            this.$Message.error(res.data.message);
          }
      })
    }
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
</style>
